
<style lang="less" scoped>
.order-container{
	background: #f0f0f0;
	margin-bottom: 10px;
	width: 100%;
    height: 100%;
    ul{
        padding-bottom: 50px;
    }
    .order-info{
        width: 100%;
        background: #fff;
        min-height: 200px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border-bottom: 1px solid #e5e5e5;
        border-top: 1px solid #e5e5e5;
        
        .order-num{
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            box-sizing: border-box;
            padding: 0 10px;
            font-size: 13px;
            align-items: center;
            >img{
                width: 12px;
                height: 13px;
                margin-right: 6px;
            }
            >span.orderCode{
                flex: 1;
                display:block;
            }
            >span:last-child{
                text-align: right;
                color: #7A1634;
            }
        }
        .order-con{
            width: 100%;
            height: 110px;
            display: flex;
            background: #f8f8f8;
            padding-right: 10px;
            box-sizing: border-box;
            position: relative;
            flex: 1;
            .order-con_img{
                display: flex;
                align-items: center;
                img{
                    width:80px;
                    height:80px;
                    margin: 10px 20px;

                }
            }
            .order-con_detail{
                flex: 1;
                line-height: 20px;
                overflow: hidden;
                padding-top: 15px;
                .summary{
                    width: 100%;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                }

            }
            .order-con_cart{
                max-width: 60px;
                height: 100%;
                min-width:50px;
                display: flex;
                box-sizing: border-box;
                justify-content: flex-start;
                align-items: flex-start;
                flex-direction: column;
                text-align: right;
                padding-top: 20px ;

                span{
                    text-align: right;
                    width: 100%;
                    display: inline-block;
                }
            }
            
        }
        .order-pro{
            width: 100%;
            height: 40px;
            display: flex;
            -webkit-box-pack: end;
            align-items: flex-end;
            justify-content: flex-end;
            padding: 0 10px;
            box-sizing: border-box;
            .order-btn{
                width: 78px;
                height: 33px;
                line-height: 33px;
                display: block;
                border-radius: 5px;
                text-align: center;
                border: 1px solid #7A1634;
                color: #7A1634;
                background: #fff;
            }
        }
        .w-50{
            height: 60px;
            align-items: center;
            justify-content: flex-end;
        }
        
    }
}
</style>
<template>
    <div class="order-container">
        <ul >
            <li class="order-info" v-for="(item, index) in list" :key="index">
                <div class="order-num">
                    <img :src="orderIcon"/>
                    <span class="text-gray text-13 orderCode">订单编号：{{item.code}}</span>
                    <span class="text-13">{{item.status}}</span>
                </div>
                <div class="order-con">
                    <div class="order-con_img">
                        <img  mode='aspectFit' :src="item.img"/>
                    </div>
                    <div class="order-con_detail">
                        <div class="text-14 summary">{{item.desc}}</div>
                        <div class="text-12 text-gray ">尺码：{{item.size}}</div>
                    </div>
                    <div class="order-con_cart">
                        <span class="text-14">￥{{item.price}}</span>
                        <span class="text-12 text-gray">x{{item.num}}</span>
                    </div>
                </div>
                <div class="order-pro text-12">共{{item.count}}件商品 总价：<span class="text-14">￥{{item.total}}</span>（含运费￥{{item.freight}}）</div>
                <div class="order-pro text-13 w-50" >
                    <span class="order-btn" @click="goLogistics">订单跟踪</span>
                </div>
            </li>
            
        </ul>
        <foot-bar @card="toPage('card')"></foot-bar>
    </div>
    
</template>
<script>
import footBar from '@/components/foot-bar/index.vue'
import orderIcon from '@/assets/images/order/orderIcon.png'
export default {
	title:'订单',
	data() {
		return {
            orderIcon:orderIcon,
			list: [
				{
					code: '20151616161615',
					status:'已发货',
					img: 'http://img5.imgtn.bdimg.com/it/u=2623307874,1239411899&fm=27&gp=0.jpg',
					desc: '西装西装西装西装西装西装西装西装西装',
					size: 'M',
					num:5,
					price: 90,
					count: 2,
					total:100,
					freight: 0.01,
				},
				{
					code: '20151616161615',
					status:'未付款',
					img: 'http://img5.imgtn.bdimg.com/it/u=2623307874,1239411899&fm=27&gp=0.jpg',
					desc: '西装西装西装西装西装西装西装西装西装',
					size: 'M',
					num:5,
					price: 90,
					count: 2,
					total:100,
					freight: 0.01,
				}
			]
		}
	},
    methods:{
		goLogistics() {
			wx.navigateTo({
		        url: '/pages/logistics/main'
		    })
		}
    },
    onReachBottom() {
        console.log(444)
    },
    components:{
        footBar
    }
}
</script>
